<template>
  <div class="personalData">
    <van-nav-bar
      title="个人资料"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="content">
      <div class="portrait">
        <img :src="userData.portrait" alt="" />
        <div class="van-uploader">
          <van-uploader :after-read="afterRead" />
        </div>
      </div>
      <van-field v-model="userData.nickName" label="昵称" placeholder="请输入昵称" />
      <van-field v-model="userData.phone" label="手机号" readonly />
      <van-field v-model="userData.gender" label="性别" placeholder="请输入性别" />
      <van-field v-model="userData.location" label="家乡" placeholder="请输入你的家乡，如：广东 广州市" />
      <van-field v-model="userData.signature" label="签名" placeholder="有趣的简介会吸引更多关注哦~" />
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalData",
  data() {
    return {
        users:[],
      userData: {
        phone: "",
        password: "",
        isLogin: false,
        Focus: [],
        nickName: "",
        portrait: "",
        gender: 1,
        location: "",
        signature: "",
      },
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
      this.users.forEach((ele) => {
        if (ele.isLogin) {
            if(ele.gender == 1){
                ele.gender = '男'
            }else{
                ele.gender = '女'
            }
          for (let key in this.userData) {
            this.userData[key] = ele[key];
          }
        }
      });
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
         if(this.userData.gender == '男' || this.userData.gender == ''){
             this.userData.gender = 1
         }else{
             this.userData.gender = 2
         }
        this.users.forEach(ele=>{
            if(ele.phone == this.userData.phone){
                for(let key in ele){
                    ele[key] = this.userData[key]
                }
            }
        })
        localStorage.setItem('users',JSON.stringify(this.users))
        this.$router.push({name:'My'})
    },
    afterRead(file) {
      console.log(file.content);
      this.userData.portrait = file.content;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content{
  padding-top: 30px;
  background-color: #fbb705;
}
/deep/.van-nav-bar__left, /deep/.van-nav-bar__right{
  top: 30px;
}
/deep/.van-icon, /deep/.van-nav-bar__text{
  color: #fff;
}
.content {
  width: calc(100% - 20px);
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 0 10px;
  .portrait {
    width: 100%;
    height: 100px;
    text-align: center;
    padding: 20px 0;
    position: relative;
    img {
      width: 80px;
      height: 80px;
      position: absolute;
      left: calc(50% - 40px);
      border-radius: 50%;
    }
    .van-uploader {
      position: absolute;
      left: calc(50% - 20px);
      opacity: 0;
    }
  }
  .van-field{
      border-bottom: 1px solid #eee;
  }
}
</style>